<template>
  <div>
    <el-dialog :title="this.form.typeId? '修改设备':'新增设备'" :visible="visible" :before-close="close" >
  <el-form ref="form" label-width="120px" size="mini" :rules='rules' :model='form'>


  <el-form-item label="型号名称：" prop="name">
    <el-input v-model="form.name" placeholder="请输入"></el-input>
  </el-form-item>

  <el-form-item label="型号编码：" prop="model">
    <el-input v-model="form.model" placeholder="请输入(限制数字、字母、中划线、下划线)"></el-input>
  </el-form-item>

    <el-form-item label="货道行数：" prop="vmRow">
    <el-input-number v-model="form.vmRow" controls-position="right" @change="handleChange" :min="1" :max="10" placeholder="请输入"></el-input-number>
  </el-form-item>

     <el-form-item label="货道列数：" prop="vmCol">
    <el-input-number v-model="form.vmCol" controls-position="right" @change="handleChange" :min="1" :max="10" placeholder="请输入"></el-input-number>
  </el-form-item>

   <el-form-item label="货道容量：" prop="channelMaxCapacity">
    <el-input-number v-model="form.channelMaxCapacity" controls-position="right" @change="handleChange" :min="1" :max="10" placeholder="请输入"></el-input-number>
  </el-form-item>
  
   <el-form-item label="设备图片：" prop="image">
    
     <!-- <el-upload
      action="#"
      list-type="picture-card"
      :file-list="fileList"
      :on-change="changeFile"
       :before-upload="beforeUpload"
       :http-request="oRequest"
    >
      <i class="el-icon-plus" />
    </el-upload> -->

     <el-upload
      list-type="picture-card"
      :file-list="fileList"
      action="#"
      :on-remove="remove"
      :on-change="changeFile"
       :http-request="httpRquest"

       :before-upload="beforeUpload"
       :on-preview="handlepictureCardpreview"
    >
      <i class="el-icon-plus" />
    </el-upload>

  </el-form-item>
         <p>支持扩展名:jpg、png,文件不得大于100kb</p>
  
</el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click='close'>取 消</el-button>
    <el-button type="primary" @click='submit'>确 定</el-button>
  </div>
</el-dialog>
    
  </div>
</template>
 
<script>
import {gettype,creatorder,username} from '@/api/deviceManagement'
import {addshjApi , updateshjlxApi} from '@/api/DeviceTypeManagement'

export default {
  name: 'HrsaasAdd',
  props:{
    visible:{
      type:Boolean,
      default:true
    },
  },
  data() {
    return {
      fileList:[],
      //  fileList: [{ name: 'default', url: 'http://destiny001.gitee.io/image/cxk.gif' }],
      form:{
        name:'',
        model:'',
        vmCol:'',
        vmRow:'',
        channelMaxCapacity:'',
        image:'',
        method:''
      },

      type:[],

      rules:{
          name:[
          {required:true,message:'请选择',trigger:'blur'}
        ],
        model:[
          {required:true,message:'请输入',trigger:'blur'},
        ],
        vmRow:[
          {required:true,message:'请输入',trigger:'blur'},
        ],
        vmCol:[
          {required:true,message:'请输入',trigger:'blur'},
        ],
        channelMaxCapacity:[
          {required:true,message:'请输入',trigger:'blur'},
        ],
       image:[
          {required:false,message:'请输入',trigger:'blur'},
        ],
      }
      
    };
  },


 watch:{
    
  }, 
  
  mounted() {
    this.gettype()
    // this.username()
  },

  methods: {
    remove(file, fileList){
       this.fileList = fileList
    },
    change(file, fileList){
    this.fileList = fileList
    },
    httpRquest(data){
     if(this.httpRquestself){
      this.httpRquestself(data.file)
      return
     }
    },
    handlepictureCardpreview(file){
       this.form.image = file.url
    },
    
    beforeUpload(file) {
  // 要开始做文件上传的检查了
  // 文件类型 文件大小
  const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
  if (!types.includes(file.type)) {
    this.$message.error('上传图片只能是 JPG、GIF、BMP、PNG 格式!')
    return false
  }
  //  检查大小
  const maxSize = 0.1 * 1024 * 1024
  if (maxSize < file.size) {
    this.$message.error('图片大小最大不能超过100kb')
    return false
  }
  return true
},

     changeFile(file, fileList) {
      // this.fileList = fileList
      console.log(this.fileList);
      console.log(file);
      // this.form.image = 'http://lkd2-java.itheima.net/image/售货机.jpg'
      // http://lkd2-java.itheima.net/image/售货机.jpg
    },



    // 清空表格
    close(){
      this.$emit('update:visible',false)
      this.$refs.form.resetFields()
      this.fileList = []
      this.form={}
      console.log(this.form,'为什么清空不生效,生效啦');
    },

    // 点击提交
    async submit(){
      //   this.xzgdrow.typeId   判断新建和修改
      // await this.$refs.form.validate()
      //  const res=await addshjApi(this.form)
      // //  updateshjlxApi
      // console.log(res,'新增成功了吗');
      // this.$message.success('新增成功')

      // this.close()
      // // this.$emit('update:visible',false)
      // this.$refs.form.reserFileds()
      // this.form={}
      // this.$parents.shjlxlbAp()()
          // this.form.image = 'http://lkd2-java.itheima.net/image/售货机.jpg'
          console.log(this.form);
      await this.$refs.form.validate()
      this.form.typeId? await addshjApi(this.form) : await updateshjlxApi(this.form.typeId)
            this.$message.success(`${this.form.typeId ? '编辑' : '新增'}成功`)
             this.close()
            this.$emit('update:visible',false)
           this.$refs.form.reserFileds()
           this.form={}
           this.$parents.shjlxlbAp()()
    },
   
    // 获取工单类型
  async gettype(){
  const res = await gettype()
  console.log(res,'能获取工单类型吗');
  this.type=res
  // map返回一个新数组
  // this.type=res.map(ele=>ele.typeName)
  // console.log(this.type,'type是啥');
},

// // 获取运营人员
// async username(){
//   const res = await username()
//   console.log(res,'是运营人员的结果吗');
// }

 handleChange(value) {
        console.log(value);
      }

  },
};
</script>

<style lang="scss" scoped>
// .color{
//   background-color: #fff;
// }
</style>